<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 普通绑定 -->
    <div style = "width:100px; height:100px; background-color:blue;">111</div>
    <!-- 1.v-bind绑定style属性,对象 -->
    <div v-bind:style = "obj">222</div>
    <div :style = "obj">22222</div>
    <!-- 2.v-bind绑定style属性,数组 -->
    <div v-bind:style = "arr">333</div>
    <div :style = "[{width:'100px'},{height:'200px'},{background:'yellowgreen'}]">3333</div>
    <!-- 3.v-bind绑定style属性和普通的style属性可以共存,我们也可以把style对象属性值作为数据保存在data里 -->
    <div style = "width: 200px; height: 300px;" :style = "{background: red}">444</div>
  </div>

  
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      data(){
        return{
          //某个元素样式
          obj:{
            width: "100px",
            height: "100px",
            background: "red"
          },

          arr:[{
            width: "200px",
          }, {
            height: "100px"
          }, {
            background: "black"
          }],

          red: "black"

        }
      }
    }).$mount("#app")
  </script>
</body>

</html>